<template>
  <div>
    <!-- 推荐那一行-->
    <div class="tabWarp">
      <!--        遍历标签栏滚轮-->
      <van-tabs v-model="active">
        <!-- 一共分两种，一种是推荐（1个），一种是分类（多个）-->
        <!-- 先写推荐，因为特殊，只有1个可以直接写死-->
        <van-tab title="推荐"/>
        <!-- 再写分类，数据是动态的，遍历channelList-->
        <!-- item是每一个对象，channelList是整个数组，后面是这个对象的id，title是展示啥写啥-->
        <van-tab v-for="item in channelList" :key="item.categoryId" :title="item.categoryName"/>
      </van-tabs>
      <!--        遮罩层里面内容(阻止冒泡)-->
      <div class="all-category-box" v-show="isShowCategory">
        <!--          文字全部频道-->
        <p class="title">全部频道</p>
        <!--          里面的全部重复数据集合-->
        <ul class="category-list">
          <li class="category-item" @click="changeActive(0)">
            <span :class="active === 0 ? 'category-active' : null">推荐</span>
          </li>
          <!--            每一个小数据-->
          <li class="category-item"
              @click="changeActive(index+1)" v-for="(item,index) in channelList" :key="item.categoryId">
            <span :class="active === index+1 ? 'category-active' : null">{{ item.categoryName }}</span>
          </li>
        </ul>
      </div>
      <!--        推荐一行右面的箭头大盒子-->
      <div class="toggle-warp">
        <!--          箭头大盒子拆分为2个小盒子，第一个渐变色透明小盒子-->
        <div class="toggle-gradient"></div>
        <!--          第二个没有渐变色的小盒子-->
        <div class="toggle-icon" @click="toggleCategory">
          <!--            里面单独的箭头小图标-->
          <van-icon class="open-icon" name="arrow-down" size="15" :style="openIconStyle"/>
        </div>
      </div>
      <!--      点击小图标出现遮罩层-->
      <van-overlay :show="isShowCategory" @click="isShowCategory = false" duration="0"/>
    </div>
    <HomeRecommendContent v-if="active === 0"/>
    <HomeCategoryContent v-else :categoryId="categoryId"/>
  </div>
</template>

<script>

import HomeCategoryContent from "@/components/Home/HomeCategoryContent";
import HomeRecommendContent from "@/components/Home/HomeRecommendContent";

export default {
  name: "HomeContent",
  components: {HomeCategoryContent, HomeRecommendContent},
  data() {
    return {
      active: 0,
      channelList: [
        {
          isCategory: true,
          categoryId: 1005000,
          categoryName: "居家生活"
        },
        {
          isCategory: true,
          categoryId: 109320005,
          categoryName: "宠物生活"
        },
        {
          isCategory: true,
          categoryId: 1010000,
          categoryName: "服饰鞋包"
        },
        {
          isCategory: true,
          categoryId: 1005002,
          categoryName: "美食酒水"
        },
        {
          isCategory: true,
          categoryId: 1013001,
          categoryName: "个护清洁"
        },
        {
          isCategory: true,
          categoryId: 1011000,
          categoryName: "母婴亲子"
        },
        {
          isCategory: true,
          categoryId: 109243029,
          categoryName: "运动旅行"
        },
        {
          isCategory: true,
          categoryId: 1043000,
          categoryName: "数码家电"
        },
        {
          isCategory: true,
          categoryId: 1019000,
          categoryName: "严选全球"
        }
      ],
      isShowCategory: false,
      categoryId: null,
    }
  },
  watch: {
    active() {
      if (this.active === 0) {
        return;
      }
      this.categoryId = this.channelList[this.active - 1].categoryId;
    }
  },
  computed: {
    openIconStyle() {
      return {transform: this.isShowCategory ? "rotate(180deg)" : null};
    },
  },
  methods: {
    toggleCategory() {
      this.isShowCategory = !this.isShowCategory;
    },
    changeActive(index) {
      this.active = index;
      this.isShowCategory = false;
    },
  },
}
</script>

<style scoped lang="less">
p {
  margin: 0;
}

.tabWarp {
  position: relative;

  .toggle-warp {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    z-index: 2;

    .toggle-gradient {
      width: 30px;
      height: 100%;
      background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff);
    }
  }

  .toggle-icon {
    width: 1rem;
    height: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;

    .open-icon {
      transition: transform 0.5s;
    }
  }
}

.all-category-box {
  background: white;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;

  .title {
    height: 44px;
    line-height: 44px;
    font-size: 14px;
    padding-left: 15px;
  }

  .category-list {
    overflow: hidden;
    padding-right: 15px;

    .category-item {
      margin-bottom: 20px;
      float: left;
      width: 25%;
      padding-left: 15px;
      box-sizing: border-box;

      span {
        width: 100%;
        display: inline-block;
        text-align: center;
        font-size: 12px;
        height: 28px;
        line-height: 28px;
        background: #fafafa;
        border: 1PX solid #ccc;
        border-radius: 2px;
      }

      .category-active {
        color: red;
        border: 1PX solid red;
      }
    }
  }
}


</style>
